<template>
  <div id='index'>
    <div class='top'>
      <van-icon
        class='topicon'
        name="free-postage"
        color='#fff'
        size='26' />
      <span>邮帮帮</span>
    </div>
    <div class='mid'>
      <router-view>
      </router-view>
    </div>
    <div class='bottom'>
      <div>
        <router-link
          class='link'
          to='/home'>
          <van-icon size='26'
            color="#fff"
            name="wap-home-o" />
          <span>首页</span>
        </router-link>
      </div>
      <div>
        <router-link
          class='link'
          to='/released'>
          <van-icon size='26'
            color="#fff"
            name="todo-list-o" />
          <span>已发</span>
        </router-link>
      </div>
      <div>
        <router-link
          class='link'
          to='/accepted'>
          <van-icon size='26'
            color="#fff"
            name="balance-list-o" />
          <span>已接</span>
        </router-link>

      </div>

      <div>
        <router-link
          class='link'
          to='/myinfo'>
          <van-icon size='26'
            color="#fff"
            name="user-o" />
          <span>我的</span>
        </router-link>
      </div>

    </div>

  </div>
</template>

<script>
export default {
  name: 'index',
  data() {
    return {}
  },
  components: {},
  created() {},
  mounted() {
    document.body.style.width = window.localStorage.getItem('width')
    document.body.style.height = window.localStorage.getItem('height')
  },
  methods: {},
}
</script>

<style scoped lang='less'>
.router-link-active {
  background-color: #fff;
  .van-icon {
    color: rgba(26, 144, 255) !important;
  }
  span {
    color: rgba(26, 144, 255) !important;
  }
}
#index {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  .top {
    flex: 0.7;
    background: rgba(26, 144, 255, 0.8);
    text-align: center;
    padding-top: 1rem;
    box-sizing: border-box;
    span {
      vertical-align: middle;
      color: #fff;
      margin-left: 0.6rem;
    }
    .topicon {
      vertical-align: middle;
    }
  }
  .mid {
    flex: 8;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
  }
  .bottom {
    z-index: 99;
    flex: 1;
    background-color: rgba(26, 144, 255, 0.8);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    div {
      width: 100%;
      height: 100%;
      text-align: center;
      flex: 1;
      box-sizing: border-box;

      a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        span {
          display: block;
          color: #fff;
          font-size: 0.8rem;
        }
      }
    }
  }
}
</style>
